<template>
    <div>
        <h2> TsInput</h2>
        modelValue <input type="text" :value="props.modelValue" @input="emit('update:modelValue', $event.target.value)">

        <hr>
        age <input type="text" :value="props.age"
            @input="emit('update:age', props.ageModifiers.upercase ? $event.target.value.toUpperCase() : $event.target.value)">
        <hr>
        {{ props }}
    </div>
</template>
<script setup>
// const props = defineProps(['modelValue', 'age', 'ageModifiers', 'modelValueModifiers']);
const props = defineProps({
    modelValue: String,
    age: String,
    modelValueModifiers: Object,
    ageModifiers: {
        default: {
            upercase: false,
        }
    }
});

const emit = defineEmits(['update:modelValue', 'update:age']);

</script>